●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Course list (cards) with search and status filter.
- Course detail and module list with progress bars.
- Module detail view with media placeholder and questions preview.
- Paged question previews using MudPagination and single-answer selection using MudRadioGroup.
- Student sidebar with avatar, overall progress and recent activity list.
## Key components
- Layout and chrome: MudAppBar, MudCard, MudPaper, MudList, MudListItem.
- Controls: MudTextField, MudSelect, MudButton, MudAvatar, MudProgressLinear, MudCardMedia.
- Question UI: MudRadioGroup, MudRadio, MudPagination.
- Presentation: MudText, MudCardHeader, MudCardContent, MudCardActions.
## How it works
- Data models are defined in DataModel.cs (CourseModel, ModuleModel, QuestionModel, StudentModel).
- Pages initialize sample data in OnInitialized and compute derived state (course/module progress).
- Selection and paging use local component state (SelectedCourse/SelectedModule, QuestionPage) and IEnumerable LINQ for FilteredCourses and PagedQuestions.
- Two-way binding is used for input/search and selections (e.g., @bind-Value on MudTextField, MudSelect and @bind-Value on MudRadioGroup bound to QuestionModel.SelectedAnswer).
- Actions mutate in-memory models (StartModule, EnrollToggle, SubmitAnswer) and push human-readable entries into RecentActivity; no persistence or navigation wiring is included.
## Styling
- Primary UI components come from MudBlazor (Mud* components and Mud theme tokens).
- Utility classes are present that indicate Tailwind CSS usage (grid, flex, md:*, gap-*, p-*, text-muted). The demo mixes MudBlazor components with Tailwind layout utilities for responsive grids.
- Layout is responsive via Tailwind breakpoints (md, lg) and MudBlazor components adapt to container sizes.
## Reuse steps
1. Add MudBlazor NuGet and register services in Program.cs (builder.Services.AddMudServices();).
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor css/theme in index.html or _Host.cshtml.
3. Add Tailwind CSS or adjust markup classes to existing CSS framework if not using Tailwind.
4. Copy DataModel.cs and pages (CourseDetail.razor, StudentDashboard.razor), adapt models to backend DTOs or APIs.
5. Replace sample initialization with real data services, inject and await data in OnInitializedAsync; wire navigation for course/module pages.
## Limitations & next steps
- This is a single-page demo created by Instruct UI and contains in-memory sample data; persistence, API services, routing and authentication are not implemented.
- Media players for audio/video are placeholders and require integration with a player component or HTML5 media elements.
- No form-level validation or submission to a backend is included for answers; add DataAnnotations and EditForm if server validation is required.
- Consider extracting shared components (CourseCard, ModuleList, QuestionPreview) and adding unit tests, localization, and accessibility checks.